<!--
	来源:CSS世界41页
	网址:https://demo.cssworld.cn/3/3-2.php
	说明:max-height实现高度auto的元素实现展开动画
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.element {
				max-height: 0;
				overflow: hidden;
				transition: max-height .25s;
			}
			
			:checked~.element {
				max-height: 666px;
			}
		</style>
	</head>

	<body>
		<input id="check" type="checkbox">
		<p>个人觉得，...</p>
		<div class="element">
			<p>display:table-cell其他...</p>
		</div>
		<label for="check" class="check-in">更多↓</label>
		<label for="check" class="check-out">收起↑</label>
	</body>

</html>